<template>
  <div class="container">
      <div class="title">添加商品信息</div>
      <div class="one">
        <label>商品名称：</label>
        <input type="text" v-model="name">
      </div>
      <div class="one">
        <label>商品图片：</label>
        <select v-model="url">
          <option value="">请选择图片</option>
          <option v-for="item in imgArr" :key="item">{{item}}</option>
        </select>
      </div>
      <div class="one">
        <label>商品价格：</label>
        <input type="text" v-model="price" size="10">元
      </div>
      <div class="one">
        <label>商品数量：</label>
        <input type="text" v-model="num" size="10">
      </div>
      <div class="two">
        <input type="button" value="添加" @click="add">
        <input type="reset" value="重置">
      </div>
  </div>
</template>
<script>
  import {mapActions} from 'vuex'
  export default {
    data: function () {
      return {
        name: '',//商品名称
        url: '',//商品图片URL
        price: '',//商品价格
        num: '',//商品数量
        imgArr: ['chocolate.jpg','honor.jpg','js.png']//商品图片URL数组
      }
    },
    methods: {
      ...mapActions([
        'addAction'//this.addAction()映射为this.$store.dispatch('addAction')
      ]),
      add: function () {
        var newShop = {//新增商品对象
            img: require('@/assets/images/'+this.url),
            name: this.name,
            price: this.price,
            num: this.num
        };
        this.addAction(newShop);//执行方法
        this.$router.push({name: 'shop'});//跳转到浏览商品页面
      }
    },
  }
</script>
<style src="@/assets/css/add.css" scoped></style>
